<template>
  <div class="relation-display">
    <div class="member-relations">
      <span class="title">会员关系</span>
      <div class="relations">
        <tail-box :place="item" v-for="(item,index) in parents" :key="index"></tail-box>
        <div class="user button-selected">
          {{getUserInfo.accountName}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TailBox from '@/components/tail-box/tail-box'
import { mapGetters } from 'vuex';
export default {
  components: {
    TailBox
  },
  methods: {
    getParent(arr, parent) {
      arr.unshift(parent.accountName)
      if (parent.parent) {
        this.getParent(arr, parent.parent)
      }
    }
  },
  computed: {
    ...mapGetters('lottery', ['getUserInfo']),
    parents() {
      let parents = []
      let parent = this.getUserInfo.parent
      this.getParent(parents, parent)
      return parents
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .member-relations 
    height 40px 
    background $color-text-button
    display flex 
    align-items center
    box-sizing border-box 
    padding-left 20px
    .relations >>> .tail-box 
      border 1px solid $color-divide-line 
      line-height 24px 
      width auto 
      padding 0 10px
      box-sizing border-box
      margin-right 10px
      .context 
        color $color-theme-dark 
        font-weight 500
      em 
        border-color transparent transparent transparent $color-divide-line
    .relations 
      display flex 
      .user 
        height 24px 
        line-height 24px
        padding 0 10px
    .title 
      font-weight 700
      margin-right 15px
</style>
